<template>
  <div>
    <el-row class="q_header">
      <div class="q_caption">
        <label>
          {{ !question.questionCaption ? '' : question.questionCaption }}
        </label>
      </div>
      <div class="q_explain">
        <div v-html="!question.questionExplain || question.questionExplain === '' ? '请填写问卷说明' : question.questionExplain" />
      </div>
      <el-row v-if="btnVisible" class="btn_oper" style="float:right;padding-right:6px;padding-bottom:2px;">
        <el-button type="success" size="mini" @click="handleModify">修改</el-button>
      </el-row>
    </el-row>
    <!-- 模态框 -->
    <div style="clear:both;">
      <el-dialog :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false" :show-close="false">
        <headerCaptionEdit :title-caption="question.questionCaption" :content="question.questionExplain" @close="dialogVisible = false" @save="handleEditHeaderCaption" />
      </el-dialog>
    </div>
  </div>
</template>

<script>
import HeaderCaptionEdit from './header-caption-edit'
export default {
  name: 'HeaderCaptionQuestion',
  components: { HeaderCaptionEdit },
  props: {
    btnVisible: {
      type: Boolean,
      default: function() {
        return false
      }
    },
    question: {
      type: Object,
      required: true,
      default: function() {
        return {}
      }
    }
  },
  data() {
    return {
      title: '修改',
      dialogVisible: false
    }
  },
  created() {
  },
  methods: {
    handleModify() {
      this.dialogVisible = true
    },
    handleEditHeaderCaption(titleCaption, content) {
      this.question.questionExplain = content
      this.question.questionCaption = titleCaption
      this.dialogVisible = false
    }
  }
}
</script>
